<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>CH1EX4: Guess The Letter Game</title>
<script src="modernizr-2.0.4.js"></script>
<script type="text/javascript">
	window.addEventListener("load", eventWindowLoaded, false);
	var Debugger = function() { };
	Debugger.log = function(message) {
		try {
			console.log(message);
		} catch (exception) {
			return;
		}
	}
	function eventWindowLoaded() {
		canvasApp();
	}
	function canvasApp() {
		if (!Modernizr.canvas) {
			return;
		}
		var theCanvas = document.getElementById("canvasOne");
		var context = theCanvas.getContext("2d");
		drawScreen();
		
		function drawScreen() {
			context.strokeStyle = "#000";
			context.lineWidth = 2;
			context.fillStyle = "#3038da";
			context.fill();
			drawRect(10,10,150,40,true);

			writeText('mokinio_pazymiai', 25, 30, true);
			context.fillStyle = "#FFF";
			drawRect(10,40,150,60,false);
			writeText('# pamokos_kodas: int', 25, 60, false);
			writeText('# pazymio_kodas: int', 25, 80, false);
			//---
			context.fillStyle = "#3038da";
			drawRect(10,120,150,30,true);
			writeText('pazymiai', 25, 140, true);
			drawRect(10,150,150,110,false);
			writeText('# id: int', 25, 170, false);
			writeText('mokinys: bigint', 25, 190, false);
			writeText('pamoka: int', 25, 210, false);
			writeText('pazymys: int', 25, 230, false);
			writeText('data: datetime', 25, 250, false);
			//---
			context.fillStyle = "#3038da";
			drawRect(10,280,150,30, true);
			writeText('dalykai', 25, 300, true);
			drawRect(10,310,150,60, false);
			writeText('# pamokos_kodas: int', 15, 330, false);
			writeText('# pavadinimo_kodas: int', 15, 350, false);
			//---
			context.fillStyle = "#3038da";
			drawRect(10,390,150,30, true);
			writeText('dalyko_pavadinimas', 25, 410, true);
			drawRect(10,420,150,60,false);
			writeText('# id: int', 25, 440);
			writeText('pavadinimas: varchar', 25, 460, false);
			//---
			context.fillStyle = "#3038da";
			drawRect(10,500,150,30,true);
			writeText('semestras', 25, 520, true);
			drawRect(10,530,150,60,false);
			writeText('# id: int', 25, 550, false);
			writeText('pavadinimas: varchar', 25, 570, false);
			//---
			context.fillStyle = "#3038da";
			drawRect(350,250,150,30,true);
			writeText('pamokos', 365, 270, true);
			drawRect(350,280,150,160,false);
			writeText('# id: int', 365, 300, false);
			writeText('mokinys: int', 365, 320, false);
			writeText('pamoka: int', 365, 340, false);
			writeText('pazymiai: int', 365, 360, false);
			writeText('mokytojas: int', 365, 380, false);
			writeText('semestras: int', 365, 400, false);
			writeText('metai: year', 365, 420, false);
			//---
			context.fillStyle = "#3038da";
			drawRect(665,10,150,30,true);
			writeText('mokinio_pamokos', 680, 30, true);
			drawRect(665,40,150,60,false);
			writeText('# mokinio_kodas: int', 680, 60, false);
			writeText('# pamokos_kodas: int', 680, 80, false);
			//---
			context.fillStyle = "#3038da";
			drawRect(665,120,150,30,true);
			writeText('mokytojai', 680, 140, true);
			drawRect(665,150,150,120,false);
			writeText('# id: int', 680, 170, false);
			writeText('asmens_kodas: bigint', 680, 190, false);
			writeText('vardas: varchar', 680, 210, false);
			writeText('pavarde: varchar', 680, 230, false);
			writeText('ar_dirba: bit', 680, 250, false);
			//---
			context.fillStyle = "#3038da";
			drawRect(665,290,150,30,true);
			writeText('mokiniai', 680, 310, true);
			drawRect(665,320,150,180,false);
			writeText('# id: int', 680, 340, false);
			writeText('asmens_kodas: bigint', 680, 360, false);
			writeText('vardas: varchar', 680, 380, false);
			writeText('pavarde: varchar', 680, 400, false);
			writeText('klase: int', 680, 420, false);
			writeText('pamokos: int', 680, 440, false);
			writeText('klases_aukletojas: int', 680, 460, false);
			writeText('vidurkis: double', 680, 480, false);
			//---
			context.fillStyle = "#3038da";
			drawRect(665,520,150,30,true);
			writeText('klase', 680, 540, true);
			drawRect(665,550,150,60,false);
			writeText('# kodas: int', 680, 570, false);
			writeText('pavadinimas: varchar', 680, 590, false);
			//---
			context.beginPath();
			context.moveTo(160, 55);
			context.lineTo(300, 55);
			context.arc(300, 70, 15, 1.5*Math.PI, 0, false);
			context.lineTo(315, 280);
			context.arc(330, 280, 15, Math.PI, 0.5*Math.PI, true);
			context.lineTo(350, 295);
			context.lineWidth = 2;
			context.strokeStyle = "black";
			context.stroke();
			//---
			context.beginPath();
			context.moveTo(160, 75);
			context.lineTo(190, 75);
			context.arc(190, 90, 15, 1.5*Math.PI, 0, false);
			context.lineTo(205, 150);
			context.arc(190, 150, 15, 0, 0.5*Math.PI, false);
			context.lineTo(160, 165);
			context.lineWidth = 2;
			context.strokeStyle = "black";
			context.stroke();
			//---
			context.beginPath();
			context.moveTo(160, 325);
			context.lineTo(300, 325);
			context.arc(315, 330, 5, 1.5*Math.PI, 0, false);
			context.arc(325, 335, 5, Math.PI, 0.5*Math.PI, true);
			context.lineTo(350, 340);
			context.lineWidth = 2;
			context.strokeStyle = "black";
			context.stroke();
			//---
			context.beginPath();
			context.moveTo(160, 345);
			context.lineTo(200, 345);
			context.arc(200, 360, 15, 1.5*Math.PI, 0, false);
			context.lineTo(215, 425);
			context.arc(200, 425, 15, 0, 0.5*Math.PI, false);
			context.lineTo(160, 440);
			context.lineWidth = 2;
			context.strokeStyle = "black";
			context.stroke();
			//---
			context.beginPath();
			context.moveTo(160, 545);
			context.lineTo(300, 545);
			context.arc(300, 530, 15, 0.5*Math.PI, 0, true);
			context.lineTo(315, 410);
			context.arc(330, 410, 15, Math.PI, 1.5*Math.PI, false);
			context.lineTo(350, 395);
			context.lineWidth = 2;
			context.strokeStyle = "black";
			context.stroke();
			//---
			context.beginPath();
			context.moveTo(665, 75);
			context.lineTo(550, 75);
			context.arc(550, 90, 15, 1.5*Math.PI, Math.PI, true);
			context.lineTo(535, 325);
			context.arc(520, 325, 15, 0, 0.5*Math.PI, false);
			context.lineTo(500, 340);
			context.lineWidth = 2;
			context.strokeStyle = "black";
			context.stroke();
			 //---
			context.beginPath();
			context.moveTo(665, 55);
			context.lineTo(620, 55);
			context.arc(620, 70, 15, 1.5*Math.PI, Math.PI, true);
			context.lineTo(605, 345);
			context.arc(620, 345, 15, Math.PI, 0.5*Math.PI, true);
			context.lineTo(665, 360);
			context.lineWidth = 2;
			context.strokeStyle = "black";
			context.stroke();
			//---
			context.beginPath();
			context.moveTo(665, 165);
			context.lineTo(570, 165);
			context.arc(570, 180, 15, 1.5*Math.PI, Math.PI, true);
			context.lineTo(555, 360);
			context.arc(540, 360, 15, 0, 0.5*Math.PI, false);
			context.lineTo(500, 375);
			context.lineWidth = 2;
			context.strokeStyle = "black";
			context.stroke();
			//---
			context.beginPath();
			context.moveTo(665, 455);
			context.lineTo(650, 455);
			context.arc(650, 440, 15, 0.5*Math.PI, Math.PI, false);
			context.lineTo(635, 180);
			context.arc(650, 180, 15, Math.PI, 1.5*Math.PI, false);
			context.lineWidth = 2;
			context.strokeStyle = "black";
			context.stroke();
			//---
			context.beginPath();
			context.moveTo(665, 565);
			context.lineTo(600, 565);
			context.arc(600, 550, 15, 0.5*Math.PI, Math.PI, false);
			context.lineTo(585, 430);
			context.arc(600, 430, 15, Math.PI, 1.5*Math.PI, false);
			context.lineTo(665, 415);
			context.lineWidth = 2;
			context.strokeStyle = "black";
			context.stroke();

			// vištos kojos
			context.beginPath();
			context.moveTo(160, 160);
			context.lineTo(170, 165);
			context.lineTo(160, 170)
			context.stroke();
			//--
			context.beginPath();
			context.moveTo(160, 320);
			context.lineTo(170, 325);
			context.lineTo(160, 330)
			context.stroke();
			//--
			context.beginPath();
			context.moveTo(160, 340);
			context.lineTo(170, 345);
			context.lineTo(160, 350)
			context.stroke();
			//--
			context.beginPath();
			context.moveTo(350, 290);
			context.lineTo(340, 295);
			context.lineTo(350, 300);
			context.stroke();
			//--
			context.beginPath();
			context.moveTo(350, 390);
			context.lineTo(340, 395);
			context.lineTo(350, 400);
			context.stroke();
			//--
			context.beginPath();
			context.moveTo(665, 50);
			context.lineTo(655, 55);
			context.lineTo(665, 60);
			context.stroke();
			//--
			context.beginPath();
			context.moveTo(665, 70);
			context.lineTo(655, 75);
			context.lineTo(665, 80);
			context.stroke();
			//--
			context.beginPath();
			context.moveTo(665, 450);
			context.lineTo(655, 455);
			context.lineTo(665, 460);
			context.stroke();
			//--
			context.beginPath();
			context.moveTo(665, 410);
			context.lineTo(655, 415);
			context.lineTo(665, 420);
			context.stroke();
			//--
			context.beginPath();
			context.moveTo(500, 370);
			context.lineTo(510, 375);
			context.lineTo(500, 380);
			context.stroke();
		}
		function drawRect(x, y, width, height, header) {
			context.fillRect(x,y,width,height);
			context.strokeRect(x,y,width,height);
			if (!header){
				context.clearRect(x,y,width,height);
			}
		}
		function writeText(text, x, y, header) {
			context.font = "15px serif";
			if (header) {
				context.fillStyle = "#FFF";
			} else {
				context.fillStyle = "#000";
			}
			context.fillText(text, x, y);
		}

	}
</script>
	</head>
	<body>
		<div style="position: absolute; top: 50px; left: 50px; font family: Verdana, Arial">
			<canvas id="canvasOne" width="1000px" height="700px">
				Your browser dpes not support HTML5 Canvas.
			</canvas>
		</div>
	</body>
</html>